<template>
  <div class="dialog">
    <!-- 络筒弹窗控件 -->
    <el-dialog width="60%" :visible.sync="Dialog" @close="closeDialog" append-to-body :close-on-click-modal="false">
      <div slot="title" class="clearfix">
        <div class="title">
          <img class="title_img" src="../../../../../assets/img/icon.png" alt="" srcset="" />
          <span class="title_left">{{ title_l }}</span>
        </div>
        <span class="title_top">{{ title }}</span>
      </div>
      <el-row v-if="data.emp == '0'">
        <el-col :span="6">
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当前状态：</span>
                <span class="title_value" :style="{ color: getHeadColor(info.stateCode) }">
                  {{ getHeadName(info.stateCode) }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>车台号：</span>
                <span class="title_value">{{ info.devSn }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>品种：</span>
                <span class="title_value">{{ info.pz || data.pz }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>总产(米)：</span>
                <span class="title_value">{{ !info.zcl || info.zcl == "None" ? 0 : info.zcl | floatFormatter }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当班产量(KG)：</span>
                <span class="title_value">
                  {{ !info.dqsjcl || info.dqsjcl == "None" ? 0 : info.dqsjcl | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当前理论产量(KG)：</span>
                <span class="title_value">
                  {{ !info.dqllcl || info.dqllcl == "None" ? 0 : info.dqllcl | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当班长度(米)：</span>
                <span class="title_value">
                  {{ !info.s_zcd || info.s_zcd == "None" ? 0 : info.s_zcd | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>空转(米)：</span>
                <span class="title_value">
                  {{ !info.kz || info.kz == "None" ? 0 : parseInt(info.kz).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>UC5读数：</span>
                <span class="title_value">
                  {{ !info.uc5ds || info.uc5ds == "None" ? 0 : parseInt(info.uc5ds).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="title_item">
                <span>挡车工：</span>
                <span class="title_value">{{ info.dcg }}</span>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>一落纱长(米)：</span>
                <span class="title_value">
                  {{ !info.ylsc || info.ylsc == "None" ? 0 : parseInt(info.ylsc).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>换向上限：</span>
                <span class="title_value">
                  {{ !info.hxsx || info.hxsx == "None" ? 0 : parseInt(info.hxsx).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>换向下限：</span>
                <span class="title_value">
                  {{ !info.hxxx || info.hxxx == "None" ? 0 : parseInt(info.hxxx).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>换向次数：</span>
                <span class="title_value">
                  {{ !info.hxcs || info.hxcs == "None" ? 0 : parseInt(info.hxcs).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>罗拉转速(米/分)：</span>
                <span class="title_value">
                  {{ !info.llzs || info.llzs == "None" ? 0 : parseInt(info.llzs).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>锭速(转/分)：</span>
                <span class="title_value">
                  {{ !info.dyzs || info.dyzs == "None" ? 0 : parseInt(info.dyzs).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>捻度(米)：</span>
                <span class="title_value">
                  {{ !info.csnd || info.csnd == "None" ? 0 : parseInt(info.csnd).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>满管长度：</span>
                <span class="title_value">
                  {{ !info.fsdc || info.fsdc == "None" ? 0 : parseInt(info.fsdc).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>龙筋基准位置：</span>
                <span class="title_value">
                  {{ !info.ljjzwz || info.ljjzwz == "None" ? 0 : parseInt(info.ljjzwz).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>基准位置检测值：</span>
                <span class="title_value">
                  {{ !info.jzwzjc || info.jzwzjc == "None" ? 0 : parseInt(info.jzwzjc).toString(16) | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <div ref="line" style="width: 100%; height: 100%"></div>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div class="echarts">
                    <div ref="lulotongEcharts1" style="width: 100%; height: 100%"></div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div class="echarts">
                    <div ref="lulotongEcharts2" style="width: 100%; height: 100%"></div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="6">
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当前状态：</span>
                <span class="title_value" :style="{ color: getHeadColor(info.stateCode) }">
                  {{ getHeadName(info.stateCode) }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>车台号：</span>
                <span class="title_value">{{ info.devSn }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>品种：</span>
                <span class="title_value">{{ info.pz2 || data.pz }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>罗拉转速(转/分)：</span>
                <span class="title_value">
                  {{ !info.llsjzs || info.llsjzs == "None" ? 0 : info.llsjzs | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>罗拉线速(米/分)：</span>
                <span class="title_value">
                  {{ !info.llxsd || info.llxsd == "None" ? 0 : info.llxsd | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>锭翼转速(转/分)：</span>
                <span class="title_value">
                  {{ !info.dysjzs || info.dysjzs == "None" ? 0 : info.dysjzs | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当前⻓度(米)：</span>
                <span class="title_value">
                  {{ !info.ylsc || info.ylsc == "None" ? 0 : info.ylsc | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>落纱定⻓(米)：</span>
                <span class="title_value">
                  {{ !info.fsdc || info.fsdc == "None" ? 0 : info.fsdc | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>总⻓度(米)：</span>
                <span class="title_value">
                  {{ !info.ljsc || info.ljsc == "None" ? 0 : info.ljsc | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>挡车工：</span>
                <span class="title_value">{{ info.dcg }}</span>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当班产量(KG)：</span>
                <span class="title_value">
                  {{ !info.dqsjcl || info.dqsjcl == "None" ? 0 : info.dqsjcl | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当前理论产量(KG)：</span>
                <span class="title_value">
                  {{ !info.dqllcl || info.dqllcl == "None" ? 0 : info.dqllcl | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当班长度(米)：</span>
                <span class="title_value">
                  {{ !info.s_zcd || info.s_zcd == "None" ? 0 : info.s_zcd | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>距离落纱时间(分)：</span>
                <span class="title_value">
                  {{ !info.jllssj || info.jllssj == "None" ? 0 : info.jllssj | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>粗纱捻度(捻/10米)：</span>
                <span class="title_value">
                  {{
                    !info.dysjzs || !info.llxsd || info.dysjzs == "None" || info.llxsd == "None"
                      ? 0
                      : (Number(info.dysjzs) / Number(info.llxsd)).toFixed(2) | floatFormatter
                  }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>⻰筋升降线速度(米/分)：</span>
                <span class="title_value">
                  {{ !info.ljsjxsd || info.ljsjxsd == "None" ? 0 : info.ljsjxsd | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>⻰筋实际位置：</span>
                <span class="title_value">
                  {{ !info.ljsjwz || info.ljsjwz == "None" ? 0 : info.ljsjwz | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>重量班产量(KG)：</span>
                <span class="title_value">
                  {{ !info.zlbcl || info.zlbcl == "None" ? 0 : info.zlbcl | floatFormatter }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>剩余⻓度(米)：</span>
                <span class="title_value">
                  {{
                    !info.fsdc || info.fsdc == "None" || !info.ylsc || info.ylsc == "None"
                      ? 0
                      : (info.fsdc - info.ylsc) | floatFormatter
                  }}
                </span>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <div ref="line" style="width: 100%; height: 100%"></div>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div class="echarts">
                    <div ref="lulotongEcharts1" style="width: 100%; height: 100%"></div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div class="echarts">
                    <div ref="lulotongEcharts2" style="width: 100%; height: 100%"></div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="14">
          <el-row style="margin-top: 10px">
            <img src="../../../../../assets/img/zjgh.svg" alt="" srcset="" />
          </el-row>
          <el-row>
            <el-table border :data="tableData" style="width: 100%" height="150" size="mini">
              <el-table-column prop="code" label="专件编码"></el-table-column>
              <el-table-column prop="desc" label="专件描述"></el-table-column>
              <el-table-column prop="date" label="上车时间" width="160px"></el-table-column>
              <el-table-column prop="num" label="数量"></el-table-column>
              <el-table-column prop="day" label="剩余天数"></el-table-column>
            </el-table>
          </el-row>
        </el-col>
        <el-col :span="10">
          <el-row style="margin-top: 10px">
            <img src="../../../../../assets/img/whjh.svg" alt="" srcset="" />
          </el-row>
          <el-row>
            <el-table border :data="table1Data" style="width: 100%" height="150" size="mini">
              <el-table-column prop="whlx" label="维护类型"></el-table-column>
              <el-table-column prop="dqjh" label="当前计划"></el-table-column>
              <el-table-column prop="sfwc" label="是否完成"></el-table-column>
              <el-table-column prop="xcjh" label="下次计划"></el-table-column>
            </el-table>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import people from "@/assets/data/people.json";
import { toFixed } from "@/utils/caculate";
export default {
  name: "dialog_cusha",
  data() {
    return {
      info: {},
      Dialog: false,
      title: "",
      peopleList: [],
      title_l: "",
      data: "",
      llxs: 0,
      xiaoLv: 0,
      tableData: [
        {
          code: "ZK101",
          desc: "粗纱",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },
        {
          code: "ZK101",
          desc: "粗纱",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },

        {
          code: "ZK101",
          desc: "粗纱",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },

        {
          code: "ZK101",
          desc: "粗纱",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        }
      ],
      table1Data: [
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "是",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        }
      ]
    };
  },

  created() {
    this.peopleList = people;
  },
  computed: {
    txcsomlNewestState() {
      return this.$store.state.txcsomlNewestState;
    }
  },
  filters: {
    floatFormatter(value) {
      if (value) {
        value = parseFloat(value);
        return value.toFixed(2);
      } else {
        return 0;
      }
    }
  },
  watch: {
    txcsomlNewestState: {
      immediate: true,
      handler(val) {
        if (val.data) {
          this.info = val.data;
          this.llxs = this.data.emp == "0" ? parseInt(val.data.llxs) : parseInt(val.data.llxsd);
          this.xiaoLv = (val.data.runTime / val.data.totalTime) * 100;
          this.$nextTick(() => {
            this.init1();
            this.init2();
            this.init3();
          });
        } else {
          this.info = {
            pz: "",
            llxs: 0
          };
          this.llxs = 0;
          this.xiaoLv = 0;
          this.$nextTick(() => {
            this.init1();
            this.init2();
            this.init3();
          });
        }
      }
    }
  },
  methods: {
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return "#02DE6D";
        //停止
        case 2:
          return "#FF3C00";
        //故障
        case 3:
          return "#FF9902";
        //满纱满桶
        case 4:
          return "#00D8D3";
        //通讯失败
        case 5:
          return "#B8B8B8";
        // 计划停台
        case 6:
          return "rgb(255,233,34)";
      }
    },
    getHeadName(stateCode) {
      switch (parseInt(stateCode)) {
        //运行
        case 1:
          return "运行";
        //停止
        case 2:
          return "停止";
        //故障
        case 3:
          return "故障";
        //满纱满桶
        case 4:
          return "满纱满桶";
        //通讯失败
        case 5:
          return "通讯故障";
        // 计划停台
        case 6:
          return "计划停台";
        default:
          return "通讯故障";
      }
    },
    closeDialog() {
      this.info = {
        pz: "",
        llxs: 0
      };
      this.llxs = 0;
      this.xiaoLv = 0;
      this.$parent.closeHandle("secTxcsomlTimer");
    },
    showDialog(data) {
      this.data = data;
      // this.title = data.id + "号粗纱机467E 详情";
      this.title_l = "粗纱机" + data.devSn;
      this.title = data.devSn + "号粗纱机467E 详情";
      this.Dialog = true;
      // this.$nextTick(() => {
      //   this.init1();
      //   this.init2();
      // });
    },
    init1() {
      if (this.$refs.lulotongEcharts1) {
        var lulotongEcharts1 = this.$echarts.init(this.$refs.lulotongEcharts1);
        var option = {
          series: [
            {
              type: "gauge",

              center: ["50%", "50%"],
              radius: "90%",
              min: 0,
              max: 50,
              itemStyle: {
                color: "#58D9F9",
                shadowColor: "rgba(0,138,255,0.45)",
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 15,
                  color: [[1, "#1D3E52"]]
                }
              },

              progress: {
                roundCap: true,
                show: true,
                width: 18
              },

              axisTick: {
                show: true
              },
              splitLine: {
                show: false,
                length: 15
              },

              axisLabel: {
                distance: 5,
                color: "#62C6F3",
                fontSize: 9
              },
              anchor: {
                show: false
              },

              title: {
                offsetCenter: [0, "85%"],
                fontSize: 20,
                color: "#58D9F9"
              },
              detail: {
                valueAnimation: true,
                fontSize: 22,
                fontFamily: "electronicFont",
                offsetCenter: [0, "60%"],
                color: "rgb(241,241,64)",
                formatter: function(value) {
                  return value.toFixed(2) + "m/min";
                }
              },

              data: [
                {
                  name: "罗拉线速",
                  value: this.llxs ? this.llxs : 0
                }
              ]
            }
          ]
        };

        lulotongEcharts1.setOption(option);
        window.addEventListener("resize", function() {
          lulotongEcharts1.resize();
        });
      }
    },
    init2() {
      if (this.$refs.lulotongEcharts2) {
        var lulotongEcharts2 = this.$echarts.init(this.$refs.lulotongEcharts2);
        var option = {
          series: [
            {
              type: "gauge",

              center: ["50%", "50%"],
              radius: "90%",
              min: 0,
              max: 100,
              itemStyle: {
                color: "rgb(128,246,217)",
                shadowColor: "rgba(0,138,255,0.45)",
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 15,
                  color: [[1, "#1D3E52"]]
                }
              },

              progress: {
                roundCap: true,
                show: true,
                width: 18
              },

              axisTick: {
                show: true
              },
              splitLine: {
                show: false,
                length: 15
              },

              axisLabel: {
                distance: 5,
                color: "#62C6F3",
                fontSize: 9
              },
              anchor: {
                show: false
              },

              title: {
                offsetCenter: [0, "85%"],
                fontSize: 20,
                color: "#58D9F9"
              },
              detail: {
                valueAnimation: true,
                fontSize: 28,
                fontFamily: "electronicFont",
                offsetCenter: [0, "60%"],
                color: "rgb(241,241,64)",
                formatter: function(value) {
                  return Math.round(value) + "%";
                }
              },

              data: [
                {
                  name: "效率",
                  value: this.xiaoLv ? this.xiaoLv : 0
                }
              ]
            }
          ]
        };

        lulotongEcharts2.setOption(option);
        window.addEventListener("resize", function() {
          lulotongEcharts2.resize();
        });
      }
    },
    init3() {
      if (this.$refs.line) {
        var line = this.$echarts.init(this.$refs.line);
        var category = [
          {
            name: "剩余长度",
            value: toFixed(this.info.sycd)
          }
        ]; // 类别
        var total = 8000; // 数据总数
        var datas = [];
        category.forEach((value) => {
          datas.push(value.value);
        });
        var option = {
          xAxis: {
            max: total,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          grid: {
            left: 90,
            top: 10, // 设置条形图的边距
            right: 120,
            bottom: 10
          },
          yAxis: [
            {
              type: "category",
              inverse: false,
              data: category,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              }
            }
          ],
          series: [
            {
              // 内
              type: "bar",
              barWidth: 18,
              legendHoverLink: false,
              silent: false,
              itemStyle: {
                normal: {
                  color: function(params) {
                    var color;
                    color = {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#56ab2f" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#a8e063" // 100% 处的颜色
                        }
                      ]
                    };
                    return color;
                  }
                }
              },
              label: {
                normal: {
                  show: true,
                  position: "left",
                  formatter: "{b}",
                  textStyle: {
                    color: "#00C4FF",
                    fontSize: 16,
                    fontWeight: 500
                  }
                }
              },
              data: category,
              z: 1,
              animationEasing: "elasticOut"
            },
            {
              // 分隔
              type: "pictorialBar",
              itemStyle: {
                normal: {
                  color: "#061348"
                }
              },
              symbolRepeat: "fixed",
              symbolMargin: 6,
              symbol: "rect",
              symbolClip: true,
              symbolSize: [1, 21],
              symbolPosition: "start",
              symbolOffset: [1, -1],
              symbolBoundingData: this.total,
              data: category,
              z: 2,
              animationEasing: "elasticOut"
            },
            {
              // 外边框
              type: "pictorialBar",
              symbol: "rect",
              symbolBoundingData: total,
              itemStyle: {
                normal: {
                  color: "none"
                }
              },
              label: {
                normal: {
                  formatter: (params) => {
                    var text;
                    if (params.dataIndex == 1) {
                      text = "{f|  " + params.data + "米}";
                    } else if (params.dataIndex == 2) {
                      text = "{f|  " + params.data + "米}";
                    } else if (params.dataIndex == 3) {
                      text = "{f|  " + params.data + "米}";
                    } else {
                      text = "{f|  " + params.data + "米}";
                    }
                    return text;
                  },
                  rich: {
                    f: {
                      color: "#ffffff",
                      fontFamily: "PangMenZhengDao",
                      fontSize: 20,
                      fontWeight: 800
                    }
                  },
                  position: "right",
                  distance: 0, // 向右偏移位置
                  show: true
                }
              },
              data: datas,
              z: 0,
              animationEasing: "elasticOut"
            },
            {
              name: "外框",
              type: "bar",
              barGap: "-120%", // 设置外框粗细
              data: [
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total
              ],
              barWidth: 25,
              itemStyle: {
                normal: {
                  color: "transparent", // 填充色
                  barBorderColor: "#1C4B8E", // 边框色
                  barBorderWidth: 1, // 边框宽度
                  // barBorderRadius: 0, //圆角半径
                  label: {
                    // 标签显示位置
                    show: false,
                    position: "top" // insideTop 或者横向的 insideLeft
                  }
                }
              },
              z: 0
            }
          ]
        };

        line.setOption(option);
        window.addEventListener("resize", function() {
          line.resize();
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts {
  width: 100%;
  height: 200px;
}
.title {
  color: rgb(111, 155, 184);
}
</style>
